<template>
  <div id="test_title" class="screen-container">
    <header class="screen-header">
      <span id="yuqing_title" class="title">
<!--        <strong>-->
<!--          新疆舆情实时监控系统-->
<!--        </strong>-->
      </span>
      <div class="title-right">
<!--        <span id="test_time" class="datetime">2049-01-01 00:00:00</span>-->
      </div>
    </header>
    <div class="screen-body">
      <section id="province" class="screen-first">
        <strong>
          {{province}}
        </strong>
      </section>
      <section class="screen-seconds">

        <div class="mychart-container" ref="mychart1">
        </div>
        <div class="mytable">
          <table>
            <tr>
              <th width="5%">序号</th>
              <th>标题</th>
              <th width="6%">属性</th>
              <th width="12%">来源</th>
              <th width="8%">时间</th>
            </tr>
            <tr v-for="(item,index) in table_data">
              <td style="text-align: center">{{ index+1 }}</td>
              <td>{{ item.title }}</td>
              <td style="text-align: center">{{ item.emotion }}</td>
              <td style="text-align: center">{{ item.author }}</td>
              <td style="text-align: center">{{ item.publish_time.substring(5,10) }}</td>
            </tr>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "map_detail",
  data() {
    return {
      table_data: [],
      echarts_data: [],
      font_size_test: 1,
      province:""
    }
  },
  created() {

  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    // document.getElementById("test_content").style.fontSize="40px"
  },
  methods: {
    async initChart() {

      const {data: ret} = await this.$http.get('/TT_article/provinceDetail?province='+this.$route.query.province)

      this.province=ret.data.province
      console.log(this.province)

      this.table_data = ret.data.message_table.slice(1,9)
      // 规范化数据
      this.table_data = this.table_data.filter(i => {
        if(i.emotion=="NEG"){
          i.emotion="消极"
        }
        if(i.emotion=="NEU"){
          i.emotion="中性"
        }
        if(i.emotion=="POS"){
          i.emotion="积极"
        }
        return i
      })

      this.echarts_data = ret.data.bar_chart

      console.log("this.echarts_data", this.echarts_data)
      this.chartInstance = this.$echarts.init(this.$refs.mychart1)

      let xDataArr = ["消极","中性","积极"] // 准备x轴数据
      let yDataArr = [] // 为x轴每一个元素指明数据

      yDataArr[0]=this.echarts_data.NEG
      yDataArr[1]=this.echarts_data.NEU
      yDataArr[2]=this.echarts_data.POS

      let testOption = {
        title: {
          text: '舆情类别', // 标题文字
          textStyle: { // 标题样式设置
            color: '#fff' // 标题文字
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xDataArr,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        series: [
          {
            name: '语文',
            type: 'bar',
            markPoint: { // 标记点
              data: [
                {
                  type: 'max', name: '最大值'
                }, {
                  type: 'min', name: '最小值'
                }
              ]
            },
            markLine: { // 标记线
              data: [
                {
                  type: 'average', name: '平均值'
                }
              ]
            },
            label: { // 柱状图上的文字设置
              show: true, // 是否显示
              // rotate: 60, // 旋转角度
              // position: 'top' // 显示位置
            },
            barWidth: '30%', // 柱的宽度
            data: yDataArr
          }
        ]
      }
      this.chartInstance.setOption(testOption)
    },
    screenAdapter() {
      console.log("screenAdapter")
      // this.font_size_test=document.h.currentTarget.innerWidth/100*2+"px";
      this.font_size_test = this.$refs.mychart1.offsetWidth / 100 * 2.2
      document.getElementById("test_title").style.fontSize = this.font_size_test + "px"
      document.getElementById("yuqing_title").style.fontSize = this.font_size_test * 1.4 + "px"
      document.getElementById("province").style.fontSize = this.font_size_test * 1.2 + "px"
      // document.getElementsByTagName("table").style.fontSize=this.font_size_test*2

      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.font_size_test
          }
        },
        series: [
          {
            barWidth: this.font_size_test*1.1,
            itemStyle: {
              barBorderRadius: [this.font_size_test / 2, this.font_size_test / 2, 0, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>


.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

th, td {
  padding: 1% 0;
  border: 1px solid #f6edd1;
}

.screen-header {
  width: 100%;
  height: 6%;
  //font-size: 20px;
  position: relative;

  > div {
    img {
      width: 100%;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }

  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }

  .datetime {
    //font-size: 15px;
    margin-left: 10px;
  }

  .logo {
    //position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-40%);

    img {
      height: 80%;
      width: 10%;
    }
  }
}

.screen-body {
  width: 100%;
  height: 100%;
  //display: flex;
  //flex-direction: column;
  //flex-wrap: wrap;
  margin-top: 10px;

  .screen-first {
    width: 100%;
    height: 6%;
    //font-size: 25px;
    padding-left: 1%;
    padding-top: 1%;
    background: #0C1E37;
  }

  .screen-seconds {
    margin-top: 1%;
    width: 100%;
    height: 92%;
    //font-size: 25px;
    display: flex;

    .mychart-container {
      width: 47%;
      height: 80%;
      background: #0C1E37;
    }

    .mytable {
      width: 52%;
      height: 80%;
      margin-left: 1%;
      background: #0C1E37;
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

* {
  //border: 1px solid red;
}
</style>
